<template>
  <el-dialog
    :visible.sync="dialogOpen"
    :title="dialogTitle"
    :before-close="cancel"
    width="50%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-table v-loading="loading" :data="showFilesPage">
      <el-table-column
        prop="batchNo"
        label="操作批号详情"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="operateType"
        label="操作类别"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作次数"
        align="center"
        prop="operateCount"
      ></el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      style="text-align: right;margin-top:10px"
    />
  </el-dialog>
</template>
<style scoped>
.dialog-footer {
  text-align: center;
}
</style>
<script>
export default {
  name: "Edit",
  props: [
    "dialogTitle", //标题
    "dialogOpen", //显示
    "dialogData",
  ],
  data() {
    return {
      loading: false,
      dataList: [],
      currentPage: 1, // 当前页码
      showFilesPage: [],
      pageSize: 10,
      total:0
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log("detail", this.dialogData);
      this.dataList = this.dialogData.interveneUniqueBatchNoList;
      this.total = this.dialogData.interveneUniqueBatchNoList.length
      this.calcPageData()
    },
    // 前端分页
    calcPageData() {
      const begin = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      this.showFilesPage = this.dataList.slice(begin, end)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.calcPageData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.calcPageData()
    },
    // 取消按钮
    cancel() {
      this.$emit("closeDialog");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        console.log("submitForm", this.formData);
        if (valid) {
          if (this.formData.id != undefined) {
            console.log("update");
            updateDataType(this.formData).then((response) => {
              console.log(response);
              if (response.code == 200) {
                this.$message({ message: "操作成功", type: "success" });
                this.$emit("closeDialog");
              } else {
                this.$message({ message: response.message, type: "error" });
              }
            });
          } else {
            addDataType(this.formData).then((response) => {
              console.log("add", response);
              if (response.code == 200) {
                this.$message({ message: "操作成功", type: "success" });
                this.$emit("closeDialog");
              } else {
                this.$message({ message: response.message, type: "error" });
              }
            });
          }
        }
      });
    },
  },
};
</script>
